<!--  -->
<template>
  <div class="aftersales">
    <Nav title="退款/售后">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- tab选项 -->
    <div class="flex justify-between aligin-center">
      <div class="tab-container">
        <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
      </div>
    </div>
    <div class="aftersales_content">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="refundList"
        ref="myScroll"
      >
        <div>
          <template v-for="(item,index) in refundList">
            <div :key="index">
              <div class="aftersales_item">
                <div class="aftersales_item_top flex">
                  <img :src="item.image" alt="">
                  <div class="aftersales_item_topcon pl-22 flex flex-column justify-between">
                    <div class="aftersales_item_title">
                      <div class="aftersales_item_name flex justify-between">
                        <p class="ellipsis-line2">{{item.goods_name}}</p>
                        <span class="pr-4">￥{{item.price}}</span>
                      </div>
                      <div class="aftersales_item_detail pt-8 flex justify-between">
                        <span class="color-gray">{{item.sku_name}}</span>
                        <span class="f-12 color-gray">x{{item.num}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 退款原因 -->
                <div class="aftersales_item_cause">
                  <span>退款原因：{{item.refund_reason}}</span>
                  <div class="aftersales_item_evidence flex mt-14">
                    <span>商品图片:</span>
                    <template v-for="(item,index) in item.memo">
                      <div class="aftersales_item_evidenceimg" :key="index">
                        <img :src="item.url" alt="" @click="previewImg(item.url)">
                      </div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="divide-line"></div>
            </div>
          </template>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import TabCommon from "../../components/TabCommon";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import { refundList } from "../../api/api";
import { ImagePreview } from 'vant'; 
export default {
  mixins: [Page],
  components: { Nav, TabCommon, Scroll },
  data() {
    return {
      tabs: ["全部", "退款中"],
      tabIndex: 0,
      refundList: [] //退款列表
    };
  },
  computed: {
    getType() {
      switch (this.tabIndex) {
        case 0:
          return 10;
        case 1:
          return -1;
      }
    }
  },
  watch: {},
  methods: {
     previewImg(url) {
       console.log("url",url)
      ImagePreview([url]);
    },
    _api() {
      refundList({
        page: this.current_page + 1,
        type: this.getType
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.refundList = [...this.refundList, ...result];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
          //重置
        this.current_page = 0;
        this.last_page = 1;
        this.loading = false;
        this.refundList = [];
        this._api();
      }
    }
  },
  created() {},
  mounted() {
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.aftersales {
  height: 100%;
}
.aftersales_content {
  height: calc(100% - 89px);
  overflow: hidden;
}
.aftersales_item_top {
  padding: 13px;
  border-bottom: 1px solid #eaeaea;
}
.aftersales_item_top > img {
  width: 93px;
  height: 93px;
}
.aftersales_item_topcon {
  width: 100%;
}
.aftersales_item_name,
.aftersales_item_detail {
  font-size: 13px;
}
.aftersales_item_name p {
  width: 152px;
  line-height: 15px;
}
.aftersales_item_cause {
  padding: 12px 14px 24px;
  font-size: 13px;
  border-bottom: 1px solid #eaeaea;
}
.aftersales_item_evidenceimg img {
  width: 50px;
  height: 50px;
  margin-right: 8px;
}
.aftersales_item_bottom {
  height: 42px;
  margin: 0 13px;
}
.aftersales_item_btns button {
  width: 76px;
  height: 35px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #bcbcbc;
  font-size: 13px;
}
.aftersales_item_btns button.the_red {
  color: #ea373f;
  border: 1px solid #ea373f;
}
//tab common
.tab-container {
  padding: 10px 10px;
  width: 50%;
}
.loading-bottom {
  width: 100%;
  text-align: center;
}
</style>